<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新品有戏后台管理</title>
    <script src="__JS__/jquery.js"></script>
    <script src="__STATIC__/layui/lay/modules/laydate.js"></script>
    <link href="__STATIC__/layui/css/modules/laydate/default/laydate.css" rel="stylesheet">
    <link href="__STATIC__/layui/css/layui.css" rel="stylesheet">
    <script src="__JS__/layer/layer.js"></script>
    <script src="__STATIC__/layui/layui.js"></script>
    <link href="__CSS__/boot.css" rel="stylesheet">
    <script src="__STATIC__/boot/js/bootstrap-table.js"></script>
    <script src="__STATIC__/boot/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="__STATIC__/boot/js/dropdown.js"></script>
    <link rel="stylesheet" href="__STATIC__/boot/css/bootstrap-table.min.css"/>
    <style>
        td {
            text-align: center;
        }
    </style>
</head>
<body>
{include file="base/header" /}
<div style="margin-top: -10px">
    <div class="navbar-form navbar-left" role="search" style="margin-left: 880px;" >
        <div class="form-group">
            <input type="text" name="search_text" id="date" class="form-control" placeholder="日期">
        </div>
    </div>
    <table id="teacount"></table>
</div>
</body>
<script>
    layui.use('element', function(){
        layui.element;
    });
    laydate.render({
        elem: '#date', //指定元素
        done:function (value, date) {
            $('#teacount').bootstrapTable(('refresh'));
        }
    });
</script>
<script>
    $('#teacount').bootstrapTable({
            //获取行号
            onClickRow: function(row, $element) {
                indexs = $element.data('index');
                //console.log(row);
            },
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true,
            striped: true,//设置为 true 会有隔行变色效果
            method: 'get',//服务器数据的请求方式 'get' or 'post'
            url: "{:url('index/teacount/info')}?sid="+{$sid},//服务器数据的加载地址
            //contentType: "application/x-www-form-urlencoded",//发送到服务器的数据编码类型
            toolbar:'#toolbar',//
            //selectItemName:'checkbox',
            search:'true',//
            searchText:'',//搜索字段
            trimOnSearch:'true',//搜索时去掉空格
            searchOnEnterKey:true,
            sortName:'ID',//排序字段
            sortOrder : 'desc',//降序
            //showToggle: 'true',//是否显示 切换试图（table/card）按钮
            // showColumns: 'true',//是否显示 内容列下拉框
            showRefresh:"false",//刷新
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            pagination: 'false',//设置为 true 会在表格底部显示分页条
            //clickToSelect:'true',//设置true 将在点击行时，自动选择rediobox 和 checkbox
            singleSelect:'true',//设置True 将禁止多选
            pageSize: '8',//如果设置了分页，页面数据条数
            pageList:[8,16],
            smartDisplay:false,
            //得到查询的参数
            queryParams : function (params) {
                //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                var temp = {
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                    title:params.search,
                    date:$("input[ name='search_text' ] ").val()
                };
                return temp;
            },
            columns: [
                {field: 'name', title: '名称', align:'center'},
                {field: 'number', title: '卖出个数', align:'center'},
                {title: '卖出时间', align:'center',formatter:formatDateTime},
                {title: '类别', align:'center',formatter:type}
            ]
        }
    );
    //操作
    function type(value,row,index) {
        if(row.type == 1){
            return "<label>大杯</label>";
        }else if(row.type == 2){
            return "<label style='color: blue'>中杯</label>";
        }else if(row.type == 3){
            return "<label style='color: red'>小杯</label>";
        }
    }
    //时间戳转时间
    function formatDateTime(value,row,index) {
        var date = new Date();
        date.setTime(row.time * 1000);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        var minute = date.getMinutes();
        var second = date.getSeconds();
        minute = minute < 10 ? ('0' + minute) : minute;
        second = second < 10 ? ('0' + second) : second;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    };
</script>
</html>